import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    ScrollView,
    Alert,
    Image,
    Button,
    TouchableOpacity,
} from 'react-native';
import {screen} from '../../common/index'
import Swiper from 'react-native-swiper';
import { Tabs, WhiteSpace,Badge } from 'antd-mobile';

const TabPane = Tabs.TabPane;


export default class CheckedDetail extends Component {
    static navigationOptions = ({navigation}) => ({
        // header: <Text>home</Text>,
        title:'CY-Mall',
        headerRight:<Image
                        style={styles.headIcon}
                        source={require('../../img/public/search_icon.png')}
                    />
    });
    constructor(props){
        super(props);
        let sliderImgs = [
            'https://ss3.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3148104472,3974793022&fm=26&gp=0.jpg',
            'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2296377710,1964824219&fm=26&gp=0.jpg',
            'https://img.kingsilk.net/3be158b165891943c90530416c5f9b6a'
        ];
        let subIcons = [
            'https://o96iiewkd.qnssl.com/FszpeBXjyftZjCTNvLk8zlOqkFax',
            'https://o96iiewkd.qnssl.com/Ftgr-uElv5_EvPjQbAEAvVh-8byh',
            'https://o96iiewkd.qnssl.com/FmsLRNARoi1aH6Hy67W0lRIDSZeN',
            'https://o96iiewkd.qnssl.com/FuauWkUOfoJZf76w0jwk241k04s0'
        ];
        this.state = {
            sliderImg : sliderImgs,
            subIcon : subIcons
        };

    };
    _onPressButton(){
        Alert.alert(
            '功能暂未开放',
            'My Alert Msg',
            [
                {text: '确定', onPress: () => console.log('Ask me later pressed')},
            ],
            { cancelable: false }
        )
    };
    _handleTabClick=(key)=> {
        console.log('onTabClick', key);
    };
    render() {
        return (
            <ScrollView contentContainerStyle={styles.container}>
                <View>
                    <Swiper height={150}
                            loop={true}
                            autoplay={true}
                            dot={<View style={{backgroundColor: '#ffffff', width: 6, height: 6, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3}} />}
                            activeDot={<View style={{backgroundColor: '#87ace9', width: 12, height: 6, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3}} />}
                            paginationStyle={{
                                bottom: 5
                            }}
                    >
                        <Image style={[styles.slideImg]} source={{uri:this.state.sliderImg[0]}}></Image>
                        <Image style={[styles.slideImg]} source={{uri:this.state.sliderImg[1]}}></Image>
                        <Image style={[styles.slideImg]} source={{uri:this.state.sliderImg[2]}}></Image>
                    </Swiper>
                </View>
                <View style={styles.row}>
                    <View style={styles.subImg}>
                        <TouchableOpacity onPress={this._onPressButton}>
                            <Image style={styles.subIcon} source={{uri:this.state.subIcon[0]}}/>
                            <Text style={styles.subTxet}>服务</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.subImg}>
                        <TouchableOpacity onPress={this._onPressButton}>
                            <Image style={styles.subIcon} source={{uri:this.state.subIcon[1]}}/>
                            <Text style={styles.subTxet}>直播</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.subImg}>
                        <TouchableOpacity onPress={this._onPressButton}>
                            <Image style={styles.subIcon} source={{uri:this.state.subIcon[2]}}/>
                            <Text style={styles.subTxet}>精选</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.subImg}>
                        <TouchableOpacity onPress={this._onPressButton}>
                            <Image style={styles.subIcon} source={{uri:this.state.subIcon[3]}}/>
                            <Text style={styles.subTxet}>积分</Text>
                        </TouchableOpacity>
                    </View>
                </View>
                <View>

                </View>
            </ScrollView>

        );
    }

}
const styles = StyleSheet.create({
    headIcon:{
        width:20,
        height:20,
        marginRight:10,
    },
    container:{
        backgroundColor:'#ffffff'
    },
    slideImg:{
        height:200,
        width:'100%',
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    row:{
        flexDirection:'row',
        justifyContent:'space-around',
        marginTop:10,
        marginBottom:10
    },
    subImg:{
        width:screen.width*0.25,
        backgroundColor:'#ffffff',
        height:screen.width*0.22,
        alignItems:'center'
    },
    subIcon:{
        width:60,
        height:60,
    },
    subTxet:{
        fontSize:14,
        paddingTop:10,
        color:'#333333',
        textAlign:'center'
    },
    text: {
        color: '#fff',
        fontSize: 30,
        fontWeight: 'bold',
    }
})